<template>
	<!-- 首页灵活用工详情页组件 -->
	<view class="main">
		<view class="title1">登记企业信息</view>
		
		<view class="qzxx">
			
			<view class="form">
				<u-form label-width="150" label-align="right" :model="form" ref="uForm" >
					<u-form-item label="企业名称" prop="name">
							<u-input input-align="right" v-model="form.name" placeholder="请输入" type="text" />
					</u-form-item>
					<u-form-item label="企业介绍" prop="remark">
							<u-input input-align="right" v-model="form.remark" placeholder="请输入" type="textarea" />
					</u-form-item>
					<u-form-item label="联系方式" prop="tell">
							<u-input input-align="right"   v-model="form.tell" placeholder="请输入" type="number" />
					</u-form-item>
					
					<u-form-item label="企业位置" prop="address">
						<u-input input-align="right" @click="chooseAddress" type="select"  placeholder="请选择"
							v-model="form.address" />
					</u-form-item>
				
				</u-form>
				
				<view class="title" style="margin-top: 20rpx;">
					上传图片
					<u-upload upload-text="选择图片" :before-upload="beforeUpload" width="155" multiple :maxCount="5"
						ref="uUpload2" :show-progress="false" height="155"
						action="https://recruit-api.xujiekeji.com/recruit-server/app/file/upload" :auto-upload="true"
						@on-remove="onRemove1" :file-list="fileList1" @on-success="successUpload1">
					</u-upload>
				</view>
				
				
				<view class="title" style="margin-top: 20rpx;" >
					上传视频，建议上传视频大小不超过200M，时长不超过60秒。
					<view class="upload1" @click="uploadVideo" v-show="scShow">
						<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/tianj.png" mode=""></image>
					    <view class="upText">选择视频</view>
					</view>
					<!-- 展示视频 -->
					<view class="videoVie" v-show="spShow">
						<video :src="form.videoUrls" :show-mute-btn="true" :enable-play-gesture="true"></video>
						<image @click="delVideo" src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/del.png" mode=""></image>
					</view>
					
					
				</view>
				
			</view>
		</view>
		
		<view class="footer">
			<view class="f" >
				<u-button shape="circle" type="primary" @click="submit">提交</u-button>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import api from '../../../../api/routes.js'
	export default{
		data(){
				
			return{
				form: {
					"name":"", //企业名称
					"lgt":"", //经度
					"lat":"", //纬度
					"tell":"", //联系电话
					"province":"", //省
					"city":"", //市
					"area":"", //区
					"address":"", //详细地址
					"imgUrls":"", //照片
					"videoUrls":"", //视频
					"remark":"" //介绍			
				},
				fileList1: [],
				fileList11: [],
				scShow:true,//选择视频组件
				spShow:false,//展示视频组件
				rules: {
					tell: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
						],
					name:[{
						required: true,
						message: '请输入企业名称',
						trigger: 'blur',
					},],
					remark:[{
						required: true,
						message: '请输入企业介绍',
						trigger: 'blur',
					},],
					address: [{
						required: true,
						message: '请选择企业位置',
						trigger: 'blur',
					}],
					
				}
			}
		},
		onReady() {
				this.$refs.uForm.setRules(this.rules);
		},
		methods:{
			// 上传图片
			onRemove1(index) {
				this.fileList11.splice(index, 1);
				this.form.imgUrls = this.fileList11.toString()
			},
			successUpload1(data, index, lists, name) {
				let url = data.url;
				this.fileList11.push(url);
				console.log(this.fileList11,"shangchuantup")
				this.form.imgUrls = this.fileList11.toString()
			},
			// 上传视频
			uploadVideo(){
				var self = this;
				uni.chooseVideo({
					sourceType: ['camera', 'album'],								
					success: function (res) {
						console.log(res.tempFilePath,'选择视频成功');									
						uni.uploadFile({
									url: 'https://recruit-api.xujiekeji.com/recruit-server/app/file/upload', //仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',												
									success: (uploadFileRes) => {
										console.log(uploadFileRes,"上传视频成功");
										let data =JSON.parse(uploadFileRes.data) ;
										self.form.videoUrls=data.url;
										self.scShow=false;
										self.spShow=true;
									}
						});
						
					}
				});
			
			},
			delVideo(){
				uni.showModal({
					title: '提示',
					content: '是否要删除此视频',
					success: res => {
					console.log(this.form,"删除成功");
					if(res.confirm){
						this.form.videoUrls='';
						this.scShow=true;
						this.spShow=false;
						wx.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
					console.log(this.form.videoUrls,"删除成功11");
					}
					
					});				
				
				console.log("删除视频");
			},
			
			
			
			
			chooseAddress() {
				var _this = this;				
				uni.chooseLocation({
					success: (res) => {
						
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						        let myLocation = res.address.match(reg);
						        let provinceName = '';
						        let cityName = '';
						        let countryName = '';
						        if (myLocation != undefined && myLocation != null) {
						          provinceName = myLocation[0];
						          cityName = myLocation[1];
						          countryName = myLocation[2];
						        }
								
								this.form.province=provinceName;
								this.form.city=cityName;
								this.form.area=countryName;
						      console.log(provinceName,cityName,countryName);
							  
							console.log(res,"地址呀")
							this.form.address = res.address+res.name
							this.form.lat = res.latitude
							this.form.lgt = res.longitude
							var name = res.name
							var address = res.address
							var latitude = res.latitude
							var longitude = res.longitude
						}
				})
			},
		submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(this.form,'请求的信息');
						this.$myRequest({
							url: api.registrationStation,
							method: "POST",
							data:this.form
						}).then(res => {
							console.log(res,'登记企业');
							if (res.data.code == 0) {
								wx.showToast({
									title: res.data.msg,
									icon: 'none'
								})				
								setTimeout(() => {
									wx.navigateBack({
									  delta: 1
									})
									wx.hideLoading()
								}, 1000)
							}
						})
						
					} else {
						console.log('验证失败');
					}
				});
				// if(this.form.tell && this.form.tell && this.form.tell){
				// 	wx.showToast({
				// 		title: "登录成功",
				// 		icon: 'none',
				// 		}),
					
				// 	setTimeout(() => {					
				// 		uni.navigateTo({
				// 			url: '/package/pages/searchJob/other/fujinyizhan',
				// 		});
				// 		wx.hideLoading()
				// 	}, 1500)
				// }else{
				// 	wx.showToast({
				// 		title: "信息不完整！",
				// 		icon: 'none',
				// 		})
				// }
			}
		},
			
	};
	
</script>



<style lang="scss" scoped>
	.title1{
		text-align: center;
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
	}		
	.qzxx {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		width: 90%;
		margin-left: 5%;
		background: white;
		border-radius: 6px;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	
		.form {
			width: 90%;
			margin-left: 20rpx;
		}
	
		.title {
			margin-left: 20rpx;
		}
	}
	.footer {
		display: flex;
		align-items: center;
		z-index: 999;
	
		.f {
			width: 90%;
			margin-left: 5%;
		}
	
		// position: fixed;
		// bottom: 0;
		height: 120rpx;
		background: white;
		width: 100%;
	}
	.upload1{
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		border-radius: 14rpx;
		background: #F4F5F6;
		margin: 10rpx;
		// display: flex;
		// flex-direction: column;
		// justify-content: center;
		// align-items: center;
		image{
			width: 50rpx;
			height: 50rpx;
			padding-top: 20rpx;
		}
		.upText{
			font-size: 26rpx;
			line-height: 50rpx;
			color: #606266;
		
		}
	}
	.videoVie{
		position: relative;
		margin-top: 20rpx;
		width:100%;
		image{
			width: 70rpx;
			height:70rpx;
			position: absolute;
			top: 10rpx;
			right: 40rpx;
		}
	}
</style>
